<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .todo-item{
            font-size: 18px;
            line-height: 38px;
        }
    </style>
</head>
<body>
<div id="example-2">
    <todo-item class="todo-item" :todo="todo" :hello="hello" :say="say" :seen="seen" :num="num">
    </todo-item>
</div>
<script src="vue.js"></script>
<script>
    /**
       type 可以是下面原生构造器：
         String
         Number
         Boolean
         Function
         Object
         Array
         Symbol
       type 也可以是一个自定义构造器函数，使用 instanceof 检测。
     */
    Vue.component('todo-item', {
        props:{
            todo:{
                type: Object,
                required: true
            },
            hello:{
                type:String,
                required: true
            },
            num:{
                type:Number,
                required: true,
                default:10,
                validator:function (value) {
                    return value>0;
                }
            },
            say:{
                type: Object,
                default: function () {
                    //TODO
                    return { message: 'hello LZUGIS' }
                }
            },
            seen:{
                type:Boolean,
                default:true
            }
        },
//        data: function () {
//            return {
//                todo:{
//                    text:"Hello",
//                    isShow:true
//                },
//                hello:"Vue",
//                say:{ message: 'hello LZUGIS' }
//            }
//        },
        template: '<p v-if="todo.isShow">' +
        '<span>ToDo:{{ todo.text }}</span><br>' +
        '<span v-if="seen">Hello:{{ hello }}</span><br>' +
        '<span>Say:{{ say.message }}</span><br>' +
        '<span>Num:{{ num }}</span>' +
        '</p>'
    });
    var app = new Vue({
        el: '#example-2',
        data:{
            seen:true,
            todo: {
                text: 'Hello todo',
                isShow: true
            },
            hello:" LZUGIS",
            say:{ message: 'hello LZUGIS' },
            num:10
        }
    })
</script>
</body>
</html>